<template>
  <div class="content-box">
    <div class="content">
      <div class="group">
        <div class="header">
          <div class="title">智能锁地图</div>
          <div class="handler">
            <div class="showCode">
              <el-switch v-model="showCode" style="--el-switch-on-color: #54bcbd" /><span class="showCodeLabel">显示编码</span>
            </div>
          </div>
        </div>
        <div class="tree">
          <ZTree :id="treeId" :api="getRoomMapTree" :show-code="showCode" @click-dom="zTreeOnClick" />
        </div>
      </div>
      <div class="main">
        <div class="header">
          <div class="title">{{ mapName }}</div>
        </div>
        <div class="table-box" v-loading="loading">
          <SearchForm
            :search="_search"
            :reset="_reset"
            :search-param="searchParam"
            :columns="columns"
            :search-col="{ xs: 1, sm: 1, md: 2, lg: 2, xl: 3 }"
          />
          <div class="roomList" v-if="roomList.length">
            <div :class="['room', `room_${item.onlineStatus}`]" v-for="item in roomList" :key="item.roomId">
              <div class="roomHeader">
                <div class="roomHeader__con">
                  <div class="power">
                    <div class="powerNo">
                      {{ item.electricity }}
                    </div>
                    <div
                      class="powerInner"
                      :style="{
                        width: `${item.electricity}%`,
                        background: item.electricity <= 20 ? '#d81e06' : '#00ff00'
                      }"
                    ></div>
                  </div>
                  <div class="onlineStatus">
                    {{ item.onlineStatus !== undefind ? connectStatus[item.onlineStatus].label : "未入网" }}
                  </div>
                </div>
              </div>
              <div class="door">
                <div class="doorInner">
                  <div class="doorNo">
                    <div v-for="val in item.roomName" :key="val">{{ val }}</div>
                  </div>
                  <!-- <div class="doorHandler"></div> -->
                </div>
              </div>
              <el-image class="powerLow" :src="powerLow" v-if="item.electricity <= 20"></el-image>
              <el-image class="checkedIn" :src="checkedIn" v-if="item.authorized"></el-image>
            </div>
          </div>
          <div class="noData" v-else>暂无数据</div>
          <div class="footer">
            <Pagination
              :pageable="pageable"
              :handle-size-change="handleSizeChange"
              :handle-current-change="handleCurrentChange"
              :small="true"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="tsx" name="deviceMonitor">
/* eslint-disable */
// @ts-nocheck
import { ref, provide } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import Pagination from "@/components/ProTable/components/Pagination.vue";
import SearchForm from "@/components/SearchForm/index.vue";
import ZTree from "@/components/ZTree/index.vue";
import { connectStatus } from "@/utils/serviceDict";
import { getRoomMapTree } from "@/api/modules/common";
import { getRoomList } from "@/api/modules/smartLock/control/deviceMonitor";
import checkedIn from "@/assets/images/checkedIn.png";
import powerLow from "@/assets/images/powerLow.png";

const checkedInStatus = [
  {
    label: "是",
    value: true
  },
  {
    label: "否",
    value: false
  }
];

const treeId = ref("tree");
const showCode = ref(false);
const loading = ref(false);
const mapids = ref([]);
const mapName = ref("");
const roomList = ref([]);

const enumMap = ref(new Map<string, { [key: string]: any }[]>());
provide("enumMap", enumMap);
enumMap.value.set("onlineStatus", connectStatus);
enumMap.value.set("authorized", checkedInStatus);
const columns = [
  {
    prop: "clause",
    label: "房间号",
    search: { el: "input" }
  },
  {
    prop: "onlineStatus",
    label: "连接状态",
    enum: connectStatus,
    search: { el: "select" }
  },
  {
    prop: "electricityMin",
    label: "最小电量",
    search: { el: "input" }
  },
  {
    prop: "electricityMax",
    label: "最大电量",
    search: { el: "input" }
  },
  {
    prop: "authorized",
    label: "是否占用",
    enum: checkedInStatus,
    search: { el: "select" }
  }
];

const searchParam = ref({
  clause: "",
  onlineStatus: "",
  electricityMin: "",
  electricityMax: "",
  authorized: ""
});

const pageable = ref({
  pageNum: 1,
  perPageNum: 100,
  total: 0
});

/**
 * 搜索
 */
const _search = () => {
  getRoomFunc();
};

/**
 * 搜索重置
 */
const _reset = () => {
  searchParam.value = {
    clause: "",
    onlineStatus: "",
    electricityMin: "",
    electricityMax: "",
    authorized: ""
  };
  getRoomFunc();
};

/**
 * 分页页数切换
 */
const handleCurrentChange = val => {
  pageable.value.pageNum = val;
  getRoomFunc();
};

/**
 * 分页条数切换
 */
const handleSizeChange = val => {
  pageable.value.perPageNum = val;
  getRoomFunc();
};

/**
 * 获取房间列表
 */
const getRoomFunc = async () => {
  loading.value = true;
  try {
    const res = await getRoomList({
      mapndxs: mapids.value,
      pageNum: pageable.value.pageNum,
      perPageNum: pageable.value.perPageNum,
      ...searchParam.value
    });
    let { page, records } = res.data;
    loading.value = false;
    pageable.value.total = page.total;
    records = records.map(item => {
      return {
        ...item,
        roomName: item.roomName.indexOf("-") != -1 ? item.roomName.split("-") : [item.roomName]
      };
    });
    roomList.value = records;
  } catch (error) {
    loading.value = false;
    console.log(error);
  }
};

/**
 * 点击树节点
 */
function zTreeOnClick({ treeNode, ids }) {
  loading.value = true;
  mapids.value = ids;
  mapName.value = treeNode.name;
  pageable.value.pageNum = 1;
  getRoomFunc();
}
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
